<template>
	<view class="container" :style="{height: bgHeight}">
		<view class="container-bg">
			<view class="logo"></view>
			<view class="form-box">
				<view class="form-item" v-show="userInfo.Identity == 0">
					<view class="item-label">您的手机号:</view>
					<view class="item-input-box">
						<input class="item-input" v-model="mobile" />
					</view>
				</view>
				<view class="form-item" v-show="userInfo.Identity == 0">
					<view class="item-label">验证码:</view>
					<view class="item-input-box">
						<input class="item-input" v-model="code" />
					</view>
				</view>
				<view class="get-code" v-show="userInfo.Identity == 0">
					<view class="get-code-btn" @tap="getCode">{{getCodeInfo}}</view>
				</view>
				<view class="form-item" v-show="userInfo.Identity == 0">
					<view class="item-label">你的姓名:</view>
					<view class="item-input-box">
						<input class="item-input" v-model="realName" />
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">孩子姓名:</view>
					<view class="item-input-box">
						<input class="item-input" v-model="studentName" />
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">孩子身份证号:</view>
					<view class="item-input-box">
						<input class="item-input" v-model="studentIdcard" />
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">您是孩子的:</view>
					<view class="item-input-box">
						<picker @change="relationChange" :range="relationList" :range-key="'value'">
							<view class="uni-input">{{relationList[index].value}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="submit-btn" @tap="doSubmit">提交</view>
		</view>
	</view>
</template>

<script>
	import {myRequest,showToastMsg} from '../../utils'
	
	export default {
		data() {
			return {
				index: 0,
				loading: false,
				seconds: 60,
				getCodeInfo: '点击获取验证码',
				bgHeight: '603px',
				mobile: '',
				code: '',
				realName: '',
				studentName: '',
				studentIdcard: '',
				intervalTimer: null,
				relationList: [],
				userInfo: null,
				mobileReg: /^[1][3,4,5,7,8,9][0-9]{9}$/,
				idCardReg: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
			}
		},
		
		onShow() {
			this.bgHeight = (uni.getSystemInfoSync().screenHeight - 64) + 'px'
			this.checkLogin()
			this.getRelations()
		},
		
		methods: {
			
			checkLogin() {
				
				let that = this
				
				myRequest({
					url: '/api/user/check_login',
					data: {},
				}, function(res) {
					
					if (res.statusCode != 200) {
						uni.showModal({
							title: '提示',
							content: '服务器错误，请求失败'
						})
						return
					}
				
					if (res.data.status != 0) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return
					}
				
					that.userInfo = res.data.data
					
				})
				
			},
			
			doSubmit() {
				
				let that = this
				
				if (that.userInfo == null) {
					showToastMsg('请先登录')
					return
				}
				if (that.userInfo.Identity == 0) {
					if (that.mobile.trim().length <= 0) {
						showToastMsg('请输入您的手机号')
						return
					}
					if (!that.mobileReg.test(that.mobile)) {
						showToastMsg('请输入正确的手机号')
						return
					}
					if (that.code.trim().length <= 0) {
						showToastMsg('请输入验证码')
						return
					}
					if (that.realName.trim().length <= 0) {
						showToastMsg('请输入您的姓名')
						return
					}
				}
				if (that.studentName.trim().length <= 0) {
					showToastMsg('请输入孩子姓名')
					return
				}
				if (that.studentIdcard.trim().length <= 0) {
					showToastMsg('请输入孩子身份证号')
					return
				}
				if (!that.idCardReg.test(that.studentIdcard)) {
					showToastMsg('请输入正确的身份证号')
					return
				}
				
				if (that.loading) return
				that.loading = true
				
				let params = {
					studentName: that.studentName,
					studentIdcard: that.studentIdcard,
					relationId: that.relationList[that.index].id
				}
				
				if (that.userInfo.Identity == 0) {
					params['mobile'] = that.mobile
					params['code'] = that.code
					params['realName'] = that.realName
				}
				
				uni.showLoading({
					title: '拼命提交中...',
					success() {
						
						if (that.timer != null) {
							clearTimeout(that.timer)
						}
						
						that.timer = setTimeout(function() {
							
							myRequest({
								url: '/api/user/register',
								data: params,
							}, function(res) {
								
								that.loading = false
								uni.hideLoading()
								
								if (res.statusCode != 200) {
									uni.showModal({
										title: '提示',
										content: '服务器错误，请求失败'
									})
									return
								}
								
								if (res.data.status == 1000) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
									return
								}
								
								showToastMsg(res.data.msg)
								
								if (res.data.status == 0) {
									uni.navigateTo({
										url: '/pages/index/index'
									})
								}
								
							})
							
						}, 1000)
						
					}
				})
				
			},
			
			relationChange(e) {
				this.index = e.target.value
			},
			
			getRelations() {
				
				let that = this
		
				if (that.loading) return
				that.loading = true
				
				uni.showLoading({
					title: '拼命加载中...',
					success() {
						
						if (that.timer != null) {
							clearTimeout(that.timer)
						}
						
						that.timer = setTimeout(function() {
							
							myRequest({
								url: '/api/user/relations',
								data: {},
							}, function(res) {
								
								that.loading = false
								uni.hideLoading()
								
								if (res.statusCode != 200) {
									uni.showModal({
										title: '提示',
										content: '服务器错误，请求失败'
									})
									return
								}
								
								if (res.data.status == 1000) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
									return
								}
								
								that.relationList = res.data.data
								
							})
							
						}, 1000)
						
					}
				})
				
			},
			
			countdown() {
				if (this.seconds > 0) {
					this.loading = true
					this.getCodeInfo = this.seconds + 's'
					this.seconds--
				} else {
					this.loading = false
					if (this.intervalTimer != null) clearInterval(this.intervalTimer)
					this.seconds = 60
					this.getCodeInfo = '点击获取验证码'
				}
			},
			
			getCode() {
				
				let that = this
				
				if (that.mobile.trim().length <= 0) {
					showToastMsg('请输入手机号')
					return
				}
				if (!that.mobileReg.test(that.mobile)) {
					showToastMsg('请输入正确的手机号')
					return
				}
				
				if (that.loading) return
				that.loading = true
				
				uni.showLoading({
					title: '拼命提交中...',
					success() {
						
						if (that.timer != null) {
							clearTimeout(that.timer)
						}
						
						that.timer = setTimeout(function() {
							
							myRequest({
								url: '/api/user/send_mobile_code',
								data: {
									mobile: that.mobile
								},
							}, function(res) {
								
								that.loading = false
								uni.hideLoading()
								
								if (res.statusCode != 200) {
									uni.showModal({
										title: '提示',
										content: '服务器错误，请求失败'
									})
									return
								}
								
								if (res.data.status == 1000) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
									return
								}
								
								showToastMsg(res.data.msg)
								
								if (res.data.status == 0) that.intervalTimer = setInterval(that.countdown, 1000)
								
							})
							
						}, 1000)
						
					}
				})
				
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
		background-image: radial-gradient(circle, #fedd04, #fec305);
	}
	
	.container-bg {
		position: absolute;
		width: 750rpx;
		height: 100%;
		background-image: url(https://public-1300796766.cos.ap-guangzhou.myqcloud.com/mini/2.png);
		background-size: cover;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.logo {
		margin-top: 168rpx;
		width: 246rpx;
		height: 134rpx;
		background-image: url(https://public-1300796766.cos.ap-guangzhou.myqcloud.com/mini/3.png);
		background-size: cover;
	}
	
	.form-box {
		width: 570rpx;
		margin-top: 48rpx;
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
	}
	
	.form-item {
		width: 100%;
		box-shadow: 2rpx 6rpx 18rpx 0px rgba(167, 167, 167, 0.71);
		background-color: #ffffff;
		height: 70rpx;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.item-label {
		padding-left: 20rpx;
	}
	
	.item-input-box {
		width: 320rpx;
		margin-left: 30rpx;
	}
	
	.get-code {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}
	
	.get-code-btn {
		width: 250rpx;
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #ffffff;
		border-radius: 6rpx;
		margin-bottom: 20rpx;
	}
	
	.submit-btn {
		width: 220rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #ffffff;
		box-shadow: 2rpx 6rpx 18rpx 0px rgba(167, 167, 167, 0.71);
		border-radius: 6rpx;
		font-size: 32rpx;
		margin-top: 30rpx;
	}
</style>
